<template>
  <div class="login_bg">
    <el-card shadow="never">
      <div class="number-data">
        <div class="item">
          <h2>
            浏览量(PV)
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  即通常说的Page
                  View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。
                </div>
              </template>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </h2>
          <p>65,715</p>
        </div>
        <div class="item">
          <h2>
            访客数(UV)
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。
                </div>
              </template>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </h2>
          <p>8,936</p>
        </div>
        <div class="item">
          <h2>
            IP数
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  一天之内您网站的独立访问ip数。
                </div>
              </template>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </h2>
          <p>10,279</p>
        </div>
        <div class="item">
          <h2>
            跳出率
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。
                </div>
              </template>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </h2>
          <p>27.92%</p>
        </div>
        <div class="item">
          <h2>
            平均访问时长
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。
                </div>
              </template>
              <i class="el-icon-question"></i>
            </el-tooltip>
          </h2>
          <p>00:19:05</p>
        </div>
      </div>
      <div class="chart">
        <el-row>
          <el-col :span="8">
            <scEcharts height="250px" :option="pie"></scEcharts>
          </el-col>
          <el-col :span="16">
            <scEcharts height="250px" :option="option"></scEcharts>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-row :gutter="15">
      <el-col :span="6">
        <Time />
      </el-col>
      <el-col :span="6">
        <Progress />
      </el-col>
      <el-col :span="12">
        <Echarts />
      </el-col>
    </el-row>
  </div>
</template>

import Time from "./../components/time.vue";
<script>
import Time from "./../components/time.vue";
import Progress from "./../components/progress.vue";
import Echarts from "./../components/echarts.vue";
import scEcharts from "@/components/scEcharts";

export default {
  components: {
    Time,
    Progress,
    Echarts,
    scEcharts,
  },
  data() {
    return {
      islogin: false,
      option: {
        title: {
          text: "Bar Demo",
          subtext: "基础柱状图",
        },
        grid: {
          top: "80px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: "15px",
          },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: "bar",
            barWidth: "15px",
          },
        ],
      },
      pie: {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["55%", "70%"],
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 235, name: "直接访问" },
              { value: 180, name: "外部链接" },
            ],
          },
        ],
      },
    };
  },
  methods: {
    async login() {
      this.islogin = true;
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-bottom: 15px;
}

.number-data {
  display: flex;
}
.number-data .item {
  flex: 1;
  border-right: 1px solid #f0f0f0;
  padding: 0 20px;
}
.number-data .item:last-child {
  border: 0;
}
.number-data .item h2 {
  font-size: 12px;
  color: #787a7d;
  font-weight: normal;
}
.number-data .item h2 i {
  margin-left: 5px;
  color: #8cc5ff;
  cursor: pointer;
}
.number-data .item p {
  font-size: 20px;
  color: #121315;
  margin-top: 10px;
}
</style>
